{% extends "base.html" %}
{% block breadcrumb %}
{{ block.super }}
	<a href="{{site.name}}/catalogo_{{ category.catalog.slug }}/">{{ category.catalog.name }}</a>
	&rsaquo;&rsaquo;
	<a href="{{site.name}}/categoria_{{ category.slug }}__catalogo_{{ category.catalog.slug }}/">{{ category.name }}</a>
{% endblock %}
<title>{% block head_title %}{{ home_page_title }}{% endblock %}</title>
{% block itemDetail %}
	{% if items %}
	{% for item in items %}
			<div class="content-image">
				<ul>
			    	<li><img src="{{ item.photo.image.url }}"
			    			 title=" {{ item.photo.title }} CODIGO: {{ item.code }}  Precio: $ ARG {{ item.price }} "
			    			 class="large-img"/>
			    	</li>
				</ul>
			</div>	
			<div class="content-description">
				<ul>
					<li><h2>{{ item.description }}</h2></li>
					<li>CODIGO: {{ item.code }}</li>
					<li class="common-price">Precio: <span class="dollars">{{ item.price }}</span></li>
					<br>
					<li>
						<g:plusone href="{{site.name}}/articulo_{{item.slug}}__categoria_{{ category.slug }}__catalogo_{{ category.catalog.slug }}" size="standard" count="false"></g:plusone>
					</li>
				</ul>
			</div>
			{% if itemDetails %}
				<div class="content-details">
				<ul><h2>Caracteristicas</h2></ul>
					{% for detail in itemDetails %}
						<ul>
							<h4>{{detail.attribute.name}}</h4>
							<li>{{ detail.value }}</li>
							<li>{{ detail.description }}</li>
						</ul>
					{% endfor %}
				</div>
			{% endif%}
			<div class="content-add-cart">
			<ul>
				<label title="Ingrese cantidad y haga click para Agregar al Changuito">Agregar al Changuito</label>
			</ul>
			<ul>
				<li>
					  <input id="itemCodeCart"		 type="hidden" value="{{ item.code }}" />
					  <label for="quantity">Cantidad</label>
					  <input type="text" 
					  		 id="quantity" 
					  		 size="3" 
					  		 length="3" 
					  		 value="1"
					  		 title="El Máximo de unidades de compra fue establecido en 99."  
					  onkeydown="return ( event.ctrlKey || event.altKey 
	                || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
	                || (95<event.keyCode && event.keyCode<106)
	                || (event.keyCode==8) || (event.keyCode==9) 
	                || (event.keyCode>34 && event.keyCode<40) 
	                || (event.keyCode==46) )" onkeyup="calculateAmount();"/>
					  X(
					  <label for="priceHidden"> $ ARG</label>
					  <input id="priceHidden" 
					  		 value="{{ item.price }}"  
					  		 size="4"
					  		 disabled/>
	                  )=
	                  <input type="text" id="subtotalAmount" size="4" disabled/>
					  
					  <input type="button" 
					  		 id="addProduct"
					  		 class="button-add-cart" 
					  		 title="Ingrese cantidad y haga click para Agregar al Changuito" 
					  		 onclick="addCart();"/>
				</li>
			</ul>
			</div>
			
	{% endfor %}
	{% else%}
		<h3>No existe ningun articulo con el codigo ingresado.</h3>
	{% endif%}
	<script>
	window.onload=function(){calculateAmount();};
	function addCart(){
		 	if(document.getElementById("quantity").value == ""){ 
		 		window.top.location.href = "{{site.name}}/cart/add/" + document.getElementById("itemCodeCart").value +"/" + 1;
	 		}else{
		 	   window.top.location.href = "{{site.name}}/cart/add/" + document.getElementById("itemCodeCart").value +"/" + document.getElementById("quantity").value;
	 		}
	 }
	 function calculateAmount(){
	    if('null' != document.getElementById("quantity")){
		 	if(document.getElementById("quantity").value >99){
	 			document.getElementById("quantity").value = 99;
	 		}
	 		var priceElement =document.getElementById("priceHidden");
	 		if(priceElement != null){
	 			var result =  parseFloat(document.getElementById("quantity").value).toFixed(2) * parseFloat(priceElement.value).toFixed(2);
	 			document.getElementById("subtotalAmount").value = result.toFixed(2);
	 		}	
	    } 
	 	
	 }
	</script>
{% endblock %}
